<template>
    <div class="mall-layout-main">
        <div class="home-wrapper track-topic">
            <div class="carousel-box">
                <el-carousel height="380px">
                    <el-carousel-item>
                      <img style="width: 100%;height: 100%;" src="../../assets/img/index/banner2.png" alt="">
                    </el-carousel-item>
                  </el-carousel>
            </div>
            <div class="page-main">
                <div class="item">
                    <div class="track-topic-item" v-for="item in 10">
                        <div class="goods-desc-wrapper">
                            <div class="img-box">
                                <img style="width: 100;height: 100%;" src="../../assets/img/index/good.jpg" alt="">
                            </div>
                            <div class="goods-desc-info">
                                <div class="info-name">
                                    <span class="text">韩国Dr.Jart+蒂佳婷药丸面膜 蓝色药丸</span>
                                </div>
                            </div>
                            <div class="info-hot">
                                <div class="hot-price">
                                    <span class="price-type">¥</span>
                                    <span class="price">26.0</span>
                                </div>
                            </div>
                            <div class="goods-desc-attr">
                                <div class="attr-item">国内仓发&保税仓发</div>
                                <div class="attr-hot">热度&nbsp;&nbsp;2745</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, prev, pager, next, jumper"
                        :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
        <homefooter></homefooter>
    </div>
</template>

<script>
    import homefooter from '../assembly/footer'
    export default {
        components: {
            homefooter
        },
        data() {
            return {
                currentPage4: 4
            }
        },
        created() {

        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /deep/.el-pagination__editor.el-input .el-input__inner {
        border: 1px solid #ccc;
    }
    
    .mall-layout-main {
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        padding-top: 24px;
        background-color: #fff !important;
    }
    
    .home-wrapper {
        margin-top: -24px;
    }
    
    .carousel-box {
        max-width: 1280px;
        height: 380px;
        margin: 0 auto;
        text-align: center;
    }
    
    .page-main {
        width: 1280px;
        min-height: 500px;
        margin: 40px auto 0;
        padding-bottom: 132px;
    }
    
    .item {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    /* .track-topic-item {
        margin-right: 25px;
    } */
    
    .goods-desc-wrapper {
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 236px;
        height: 342px;
        margin-right: 25px;
        margin-bottom: 30px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid transparent;
    }
    /* .goods-desc-wrapper :nth-child(5n) {
        margin-right: 0;
    } */
    
    .home-wrapper .page-main .item .goods-desc-wrapper {
        margin-right: 0;
    }
    
    .home-wrapper .page-main .item .track-topic-item {
        margin-right: 25px;
    }
    
    .home-wrapper .page-main .item .track-topic-item:nth-child(5n) {
        margin-right: 0;
    }
    
    .img-box {
        width: 236px;
        height: 236px;
        cursor: pointer;
    }
    
    .img-box:hover {
        transform: scale(1.1);
    }
    
    .goods-desc-info {
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        width: 100%;
        margin-top: 8px;
    }
    
    .info-name {
        display: -webkit-box;
        height: 44px;
        overflow: hidden;
        color: #333;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .span {
        color: #333;
    }
    
    .info-hot {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        margin-top: 8px;
        line-height: 14px;
    }
    
    .hot-price {
        color: #f44;
        font-weight: 600;
        font-size: 22px;
    }
    
    .price-type {
        margin-right: 2px;
        font-size: 12px;
    }
    
    .price {
        font-size: 18px;
    }
    
    .goods-desc-attr {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 18px;
        margin-top: 10px;
    }
    
    .attr-item {
        width: 150px;
        height: 18px;
        margin-right: 6px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        border-radius: 1px;
    }
    
    .attr-hot {
        width: 78px;
        overflow: hidden;
        color: #999;
        font-size: 12px;
        white-space: nowrap;
        text-align: right;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    
    .pagination {
        display: flex;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-top: 35px;
    }
</style>